倘若不斷向深處扎根，就能茁壯成長 - RM

進入到規範了，然後呢？

有種真的過了很久才進入正文的感覺，應該是我的錯覺吧～

本文中，會以 CSS2.2 selector 為主，輔以新版 Selector 3 規範
規範直通車：

1. Selectors CSS2.2
2. Selectors 3

在剛進入到選擇器的篇章，我們可以看下如下的目錄（CSS2.2），規範本身將選擇器主要分成 pattern matching 、選擇器語法、通用選擇器、偽類選擇器、組合選擇器等等，往往在這個時候我們會有點頭昏不知道該如何看起，然後就會被神秘力量吸引開始看 youtube 首頁推薦，其實就這個選擇器篇章來說可以先看的重點有三大部分：

1. Pattern matching
2. 選擇器本身的語法（藉此理解選擇器本身的語法）
3. 各種不同類型的選擇器（包含偽類、類別選擇器、組合選擇器 ...）

CSS2.2 selector 目錄

• 5.1 Pattern matching
• 5.2Selector syntax
• 5.3 Universal selector
• 5.4 Type selectors
• 5.5 Descendant selectors
• 5.6 Child selectors
• 5.7 Adjacent sibling selectors
• 5.8 Attribute selectors
• 5.9 ID selectors
• 5.10 Pseudo-elements and pseudo-classes
• 5.11 Pseudo-classes
• 5.12 Pseudo-elements

閱讀過 5.1、5.2 項的規範後，我們會知道選擇器的語法如何運作、選擇器如何選取到我們要的元素，我個人很喜歡這幾段，因為這是以往單純用選擇器時很自然會略過的地方，不過看過後便會了解規範對於這個部分有很仔細的定義，在這樣的大概念建立後，便可以依序下去理解各種選擇器如何使用囉～那接著事不宜遲，馬上開始介紹吧～

Pattern matching

直通車，請搭配觀看： 5.1 Pattern matching

In CSS, pattern matching rules determine which style rules apply to elements in the document tree . These patterns, calledselectors,may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.

規範中提到了 Pattern matching，其實是說選擇器透過 Pattren matching 規則去決定我們所設定的樣式會套用到 文檔樹 中的哪一個元素，透過這個規則，選擇器便可以在我們設定後照我們所想的套用到元素上，而 CSS 當中不同類型的選擇器便可提供我們透過想要的選擇方式自由選中我們所要的元素，像是要選擇到 div 這個元素就可以透過不只單一種方法，以下列舉幾種方式：

div { 
	width: 300px;
	background-color: pink;
 }
.class-name {
	width: 300px;
	background-color: pink;
}
* {
	width: 300px;
	background-color: pink;
}

我們可以看到若是今天我要選到 div 便可以透過元素選擇器、類選擇器、通用選擇器等方法。

Selector syntax 選擇器語法

直通車：5.2 Selector syntax

對於選擇器來說，它有規定的語法，透過這些語法可以選中我們想要套用樣式的元素，下面將依序列出：

• simple selector
• sequence of simple selectors
• selector
• Combinator（MDN 中文翻譯為組合選擇器）

simple selector 簡單選擇器

A simple selector is either a type selector , universal selector , attribute selector , class selector , ID selector , or pseudo-class .

簡單選擇器包含：元素選擇器、通配選擇器、屬性選擇器、類選擇器、ID 選擇器、偽類。

sequence of simple selectors

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator . It always begins with a type selector or a universal selector . No other type selector or universal selector is allowed in the sequence.

sequence of simple selectors 透過一連串沒有透過 combinator 分離的簡單選擇器組成，透過元素選擇器、通配選擇器開頭，並且不能有其他的元素選擇器、通配選擇器。

combinator 文後會提到，舉例來說就是我們熟悉的 +、> ... 等。

selector

A selector is a chain of one or more sequences of simple selectors separated by combinators . One pseudo-element may be appended to the last sequence of simple selectors in a selector.

由 sequence of simple selector 組成，偽元素可以出現在最後列的 sequence of simple selectors 後方。

Combinator 組合選擇器

下文會敘述，它聯繫了選擇器之間相互的關係。

到這裡我們可以理解到選擇器語法以及選擇器如何選中我們的元素，透過這些我們對於選擇器運作上也能更加熟悉，接著便是了解各種選擇器啦～

選擇器類別

選擇器本身提供了許多種類別，透過規範我們也可以看到 W3C 也不斷在新增一些新的選擇器，這些選擇器本身存在的意義是讓我們能透過更自由的方式，將我們想要的樣式設定到文檔樹特定元素之中，而選擇器本身有以下幾大類：

下一篇會對各個選擇器有更深的介紹。

1. 簡單選擇器
   • 標籤選擇器
   • 類別選擇器
   • ID 選擇器
   • 通用選擇器
   • 屬性選擇器
   • 偽類
2. 偽元素
3. Combinators

如何閱讀選擇器內容

以 Combinator 為舉例～

Combinator

直通車：Combinators
在 CSS 2.2 中其實沒有所謂的 Combinator ，Combinator 是在之後的規範版本修訂的，把我們所熟悉的兄弟選擇器、後裔選擇器都歸類到 Combinator 中，想了解更多 Combinators 細節可以去查看最新的篇章 Combinators

先了解定義

進入到 Combinator 中我們可以看見對於每一個 Combinator 規範都會做出一段解釋，透過這段解釋我們可以更詳細的理解選擇器的意義，像是 Descendant combinator 規範寫道：

At times, authors may want selectors to describe an element that is the descendant of another element in the document tree (e.g., "an EM element that is contained within an H1 element"). Descendant combinators express such a relationship.

可以理解成，當想要調整文檔樹中某個元素為前提下的另一個後代元素，這時候便可以使用 Descendant combinator。

接著，實做看看～

我們便可以了解透過 Descendant combinator，可以將選擇器以某種關係連結起來，我們可以選中文檔樹中元素的後代元素，以語法來說便會是：

div p[href]

看看規範給出的範例

而規範中也有舉出如何使用的實際情況，下面的黃色部份便會是規範中的例子：

真的是非常貼心吧～，看到這裡有沒有開始覺得規範也有它親切的地方呢？本章中主要介紹了選擇器的原理、選擇器語法，還有如何查看選擇器的用法，我們明天見～～

資料來源：

1. W3C CSS3 selector
2. 文件物件模型 (DOM)
3. 前端新手村 CSS 簡單 Selector (上篇) & Groups - 《Chris 技術筆記》
4. 前端新手村 CSS Selector 的 Combinators - 《Chris 技術筆記》
5. 重新認識 CSS - CSS Selector (1) | Titangene Blog

以上的部分有任何錯誤的地方，歡迎指正呦～非常感謝～～XD